<template>
    <div>
        <div class="i-layout-page-header">
            <PageHeader class="product_tabs" hidden-breadcrumb>
                <div slot="title">
                    <router-link :to="{ path: '/admin/marketing/appointment/appointmentList' }">
                    <Button icon="ios-arrow-back" size="small" class="mr20">返回</Button>
                    </router-link>
                    <span v-text="$route.params.id ? '预约记录' : '预约记录'" class="mr20"></span>
                </div>
            </PageHeader>
        </div>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <Form ref="tableFrom" :model="tableFrom"  :label-width="labelWidth" :label-position="labelPosition" @submit.native.prevent>
                <Row type="flex" :gutter="24">
                    <Col v-bind="grid">
                        <FormItem label="手机号搜索：" label-for="title">
                            <Input search enter-button placeholder="请输入手机号" v-model="tableFrom.phone" @on-search="userSearchs"/>
                        </FormItem>
                    </Col>
                    <Col v-bind="grid">
                        <FormItem label="推荐人搜索：" label-for="title">
                            <Input search enter-button placeholder="请输入推荐人手机号" v-model="tableFrom.share_phone" @on-search="userSearchs"/>
                        </FormItem>
                    </Col>
                    <!-- <Col v-bind="grid">
                        <FormItem label="预约名称：" label-for="tableFrom.type">
                        <Select
                                v-model="tableFrom.type"
                                placeholder="请选择"
                                clearable
                                @on-change="userSearchs"
                            >
                                <Option value="1">杨威到院</Option>
                                <Option value="2">神秘访客</Option>
                                <Option value="3">颜值体验官</Option>
                                <Option value="4">幼态脸全脸打造</Option>
                                <Option value="5">祛斑模特招募</Option>
                                <Option value="7">杨威到院九月</Option>
                                <Option value="8">问题肌亲诊</Option>
                                <Option value="9">联合亲诊</Option>
                                <Option value="10">祛斑模特招募</Option>
                                <Option value="11">注射大咖面诊</Option>
                                <Option value="12">杨威到院11月</Option>
                                <Option value="13">张新成到院</Option>
                                <Option value="14">素人明星</Option>
                                <Option value="15">专家田博文</Option>
                                <Option value="16">高阶美学紧致塑妍</Option>
                                <Option value="17">双维塑美</Option>
                                <Option value="18">无限晶彩</Option>
                                <Option value="19">530杨威</Option>
                                <Option value="20">美白计划</Option>
                                <Option value="21">颜值升级计划</Option>
                                <Option value="22">明星美学专场</Option>
                                <Option value="23">时光无痕臻美焕新</Option>
                            </Select>
                        </FormItem>
                    </Col> -->
                    <Button class="ml10" @click="exports">导出</Button>
                </Row>

            </Form>
            <Table :columns="columns1" :data="tableList">
                <template slot-scope="{ row }" slot="share_name">
                    <span v-if="row.shareInfo">{{ row.shareInfo.real_name }}</span>
                </template>
                <template slot-scope="{ row }" slot="share_phone">
                    <span v-if="row.shareInfo">{{ row.shareInfo.phone }}</span>
                </template>
                <!-- <template slot-scope="{ row }" slot="type">
                    <span v-if="row.type == 1">杨威到院</span>
                    <span v-if="row.type == 2">神秘访客</span>
                    <span v-else-if="row.type == 3">颜值体验官</span>
                    <span v-else-if="row.type == 4">幼态脸全脸打造</span>
                    <span v-else-if="row.type == 5">祛斑模特招募</span>
                    <span v-else-if="row.type == 7">杨威到院九月</span>
                    <span v-else-if="row.type == 8">问题肌亲诊</span>
                    <span v-else-if="row.type == 9">联合亲诊</span>
                    <span v-else-if="row.type == 10">祛斑模特招募</span>
                    <span v-else-if="row.type == 11">注射大咖面诊</span>
                    <span v-else-if="row.type == 12">杨威到院11月</span>
                    <span v-else-if="row.type == 13">张新成到院</span>
                    <span v-else-if="row.type == 14">素人明星</span>
                    <span v-else-if="row.type == 15">专家田博文</span>
                    <span v-else-if="row.type == 16">高阶美学紧致塑妍</span>
                    <span v-else-if="row.type == 17">双维塑美</span>
                    <span v-else-if="row.type == 18">无限晶彩</span>
                    <span v-else-if="row.type == 19">530杨威</span>
                    <span v-else-if="row.type == 20">美白计划</span>
                    <span v-else-if="row.type == 21">颜值升级计划</span>
                    <span v-else-if="row.type == 22">明星美学专场</span>
                    <span v-else-if="row.type == 23">时光无痕臻美焕新</span>
                </template> -->
                <template slot-scope="{ row }" slot="seekAdvice">
                    <span v-if="row.userInfo">{{ row.userInfo.adviser_name }}</span>
                </template>
            </Table>
            <div class="acea-row row-right page">
                <Page
                  :total="page.total"
                  :current="page.pageNum"
                  show-elevator
                  show-total
                  @on-change="pageChange"
                  :page-size="page.pageSize"
                  @on-page-size-change="limitChange"
                  show-sizer
                  />
            </div>
        </Card>
    </div>
  </template>

  <script>
   import { mapState } from 'vuex';
    import { recordFormIndex,exportFormList } from '@/api/marketing';
    import exportExcel from "@/utils/newToExcel.js";
    export default {
        name: 'appointmentRecord',
        data () {
            return {
                columns1: [
                    {
                        title: 'ID',
                        key: 'id',
                        width: 80
                    },
                    // {
                    //     title: '用户等级',
                    //     slot: 'share_phone',
                    //     minWidth: 120
                    // },
                    {
                        title: '顾客姓名',
                        key: 'real_name',
                        minWidth: 150
                    },
                    {
                        title: '性别',
                        key: 'gender',
                        minWidth: 150
                    },
                    {
                        title: '年龄',
                        key: 'age',
                        minWidth: 150
                    },
                    // {
                    //     title: '分类',
                    //     slot: "type",
                    //     minWidth: 150
                    // },
                    {
                        title: '联系方式',
                        key: 'phone',
                        minWidth: 150
                    },
                    {
                        title: '咨询',
                        slot: "seekAdvice",
                        minWidth: 100
                    },
                    {
                        title: '报名时间',
                        key: 'add_time',
                        minWidth: 180
                    },
                    // {
                    //     title: '预约时间',
                    //     key: 'subscribe_date',
                    //     minWidth: 180
                    // },
                    // {
                    //     title: '预约项目',
                    //     key: 'product',
                    //     minWidth: 150
                    // },
                    // {
                    //     title: 'uid',
                    //     key: 'uid',
                    //     width: 60
                    // },
                    // {
                    //     title: '分享人姓名',
                    //     slot: 'share_name',
                    //     minWidth: 120
                    // },
                    // {
                    //     title: '分享人联系方式',
                    //     slot: 'share_phone',
                    //     minWidth: 120
                    // },
                ],
                tableList: [],
                grid: {
                    xl: 7,
                    lg: 7,
                    md: 12,
                    sm: 24,
                    xs: 24
                },
                tableFrom: {
                    status: '',
                    phone: '',
                    share_phone: '',
                    type: 2,
                },
                page: {
                      total: 0, // 总条数
                      pageNum: 1, // 当前页
                      pageSize: 20, // 每页显示条数
                },
                total: 0,
                // textType: 2,
                // share_phone: ''
            }
        },

        created () {
            if (this.$route.params.id) {
                this.tableFrom.type = this.$route.params.id
                this.getList();
            }
            
        },
        computed: {
            ...mapState('admin/layout', [
                'isMobile'
            ]),
            labelWidth () {
                return this.isMobile ? undefined : 90;
            },
            labelPosition () {
                return this.isMobile ? 'top' : 'right';
            }
        },
        methods: {
            // 列表
            getList () {
                this.loading = true;
                recordFormIndex({
                  page: this.page.pageNum,
                  limit: this.page.pageSize,
                  phone: this.tableFrom.phone,
                  type: this.tableFrom.type,
                  share_phone: this.tableFrom.share_phone
                }).then(async res => {
                    let data = res.data
                    this.tableList =  data.list;
                    this.page.total = data.count;
                    this.loading = false;
                }).catch(res => {
                    this.loading = false;
                    this.$Message.error(res.msg);
                })
            },
            pageChange (index) {
                this.page.pageNum = index;
                this.getList();
            },
            limitChange(limit) {
              this.page.pageSize = limit;
              this.getList();
            },
            // 表格搜索
            userSearchs () {
                this.page.pageNum = 1;
                this.getList();
            },
            async exports(){
                let [th, filekey, data, fileName] = [[], [], [], ""];
                let excelData = JSON.parse(JSON.stringify(this.tableFrom));
                // console.log(excelData,"1111")
                excelData.page = 1;
                for (let i = 0; i < excelData.page + 1; i++) {
                    let lebData = await this.getExcelData(excelData);
                    if (!fileName) fileName = lebData.filename;
                    if (!filekey.length) {
                    filekey = lebData.filekey;
                    }
                    if (!th.length) th = lebData.header;
                    if (lebData.export.length) {
                        data = data.concat(lebData.export);
                        excelData.page++;
                    }
                }
                exportExcel(th, filekey, fileName, data);
            },
            getExcelData(excelData) {
                return new Promise((resolve, reject) => {
                    exportFormList(excelData).then((res) => {
                    return resolve(res.data);
                    });
                });
            },
          }
    }
  </script>

  <style scoped>

  </style>
